<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="assets/css/ace.min.css" />
    <link rel="stylesheet" href="assets/css/font-awesome.min.css" />
    <link rel="stylesheet" href="Widget/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link href="Widget/icheck/icheck.css" rel="stylesheet" type="text/css" />
    <!--[if IE 7]>
    <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
    <![endif]-->
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
    <![endif]-->
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/typeahead-bs2.min.js"></script>
    <!-- page specific plugin scripts -->
    <script src="assets/js/jquery.dataTables.min.js"></script>
    <script src="assets/js/jquery.dataTables.bootstrap.js"></script>
    <script type="text/javascript" src="js/H-ui.js"></script>
    <script type="text/javascript" src="js/H-ui.admin.js"></script>
    <script src="assets/layer/layer.js" type="text/javascript" ></script>
    <script src="assets/laydate/laydate.js" type="text/javascript"></script>
    <script type="text/javascript" src="Widget/zTree/js/jquery.ztree.all-3.5.min.js"></script>
    <script src="js/lrtk.js" type="text/javascript" ></script>
    <title>商品列表</title>
</head>
<body>
<div class=" page-content clearfix">
    <div id="products_style">
        <div class="search_style">

            <ul class="search_content clearfix">
                <li>
                    <label class="l_f" style="margin-right: 10px;">一级分类</label>
                    <select  class="text_add" id="selection" name="categoryId">
                        <option value="">请选择商品分类</option>
                    </select>
                </li>
                <li>
                    <label class="l_f" style="margin-right: 10px;">商品品牌</label>
                    <select  class="text_add" id="brandSelect">
                        <option value="">请选择商品品牌</option>
                    </select>
                </li>
                <li style="width:90px;">
                    <button type="button" class="btn_search"><i class="icon-search"></i>查询</button>
                </li>
            </ul>
        </div>
        <div class="border clearfix">
       <span class="l_f">
        <a href="BasicInfoAndDetailListServlet" title="添加商品" class="btn btn-warning Order_form"><i class="icon-plus"></i>添加商品</a>
        <a href="javascript:ovid()" class="btn btn-danger"><i class="icon-trash"></i>批量删除</a>
       </span>
            <span class="r_f">tips</span>
        </div>
        <div class="table_menu_list clearfix" id="testIframe" style="width:100%">
            <table class="table table-striped table-bordered table-hover" id="sample-table" >
                <thead>
                <tr>
                    <th width="25px"><label><input type="checkbox" class="ace"><span class="lbl"></span></label></th>
                    <th width="80px">商品编号</th>
                    <th width="250px">商品名称</th>
                    <th width="100px">商品图片</th>
                    <th width="100px">最高回收价</th>
                    <th width="100px">最低回收价</th>
                    <th width="200px">操作</th>
                </tr>
                </thead>
                <tbody id="goodTbody">

                </tbody>
            </table>
        </div>
    </div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
    //初始化宽度、高度
    $(".widget-box").height($(window).height()-215);
    $(".table_menu_list").width($(window).width()-30);
    $(".table_menu_list").height($(window).height()-215);
    //当文档窗口发生改变时 触发
    $(window).resize(function(){
        $(".widget-box").height($(window).height()-215);
        $(".table_menu_list").width($(window).width()-30);
        $(".table_menu_list").height($(window).height()-215);
    })
</script>
<script type="text/javascript">
    $(function (){
        //发送ajax请求
        $.post("CategoryListAjaxServlet",function (res){
            if(res.code == 1000){
                var categoryArr = res.data;
                for (var i = 0; i < categoryArr.length; i++) {
                    var category = categoryArr[i];
                    var opt = "<option value='"+category.categoryId+"'>"+category.categoryName+"</option>"
                    $("#selection").append(opt)
                }
            }
        },"json")
    })
    //监听一级分类下来菜单change事件
    $("#selection").change(function (){
        $("#brandSelect").html("<option value=''>请选择商品品牌</option>")
        var cId = $("#selection").val();
        if(cId != ""){
            //发送ajax请求到BrandListAjaxServlet
            $.post("BrandListAjaxServlet",{categoryId:cId},function (res){
                if(res.code == 1000){
                    var brandArr = res.data;

                    for (var i = 0; i < brandArr.length; i++) {
                        var brand = brandArr[i];
                        var optStr = "<option value='"+brand.brandId+"'>"+brand.brandName+"</option>";
                        $("#brandSelect").append(optStr)
                    }
                }else if(res.code == 1001){
                    layer.msg("品牌加载失败！")
                }
            },"json")
        }else {

        }
    })

    $(".btn_search").click(function (){
        //1、获取品牌id
        var bId = $("#brandSelect").val();
        $.post("GoodListServlet",{brandId:bId},function (res){
            if(res.code == 1000){
                var goods = res.data;
                $("#goodTbody").html("")
                for (var i = 0; i < goods.length; i++) {
                    var good = goods[i];
                    var trStr = "<tr>\n" +
                                    "<td width=\"25px\"><label><input type=\"checkbox\" class=\"ace\"><span class=\"lbl\"></span></label></td>\n" +
                                    "<td width=\"80px\">"+good.goodId+"</td>\n" +
                                    "<td width=\"250px\">"+good.goodName+"</td>\n" +
                                    "<td width=\"100px\">"+good.goodImg+"</td>\n" +
                                    "<td width=\"100px\">￥"+ good.goodFifthPrice+"</td>\n" +
                                    "<td width=\"100px\">￥"+good.goodMinPrice+"</td>\n" +
                                    "<td class=\"td-manage\"> \n" +
                                    "   <a title=\"编辑\" href=\"javascript:;\"  class=\"btn btn-xs btn-info\" ><i class=\"fa fa-edit bigger-120\"></i>编辑</a> \n" +
                                    "   <a title=\"删除\" href=\"javascript:;\"  onclick=\"member_del(this,'1000')\" class=\"btn btn-xs btn-danger\" ><i class=\"fa fa-trash  bigger-120\"></i>删除</a> \n" +
                                    "</td> \n" +
                                "</tr>"

                    $("#goodTbody").append(trStr)
                }
            }else {
                layer.msg("查无此商品！")
            }
        },"json")
    })
</script>

